<template>
	<view class="page-loading" :style="{height: height}">
		<view class="loading" v-if="!showPage" :style="{height: height}">
			<view class="flex" v-if="error">
				<u-icon name="info-circle-fill" size="100" color="#FBD220"></u-icon>
				<text class="text mt-20">网络连接超时！</text>
				<view class="flex btn-retry" @click="onRetry"><text>点击重试</text></view>
			</view>
			<view class="flex" v-else>
				<image class="icon" :src="icon"></image>
				<text class="text">{{text}}</text>
			</view>
		</view>
		<block v-if="mode === 'show'">
			<view v-show="showPage" :class="{show: showPage && animation}" :style="{height: height}">
				<slot></slot>
			</view>
		</block>
		<block v-if="mode === 'if'">
			<view v-if="showPage" :class="{show: showPage && animation}" :style="{height: height}">
				<slot></slot>
			</view>
		</block>
	</view>
</template>

<script>
	const timeout = 30
	let timer = null,
		time = timeout
	export default {
		data() {
			return {
				showPage: false,
				error: false
			}
		},
		created() {
			this.timing()
		},
		props: {
			// 是否显示内容
			show: {
				type: [Boolean, Object],
				default: false
			},
			// 加载图片
			icon: {
				type: String,
				default: 'http://192.168.1.156/common/loading.gif'
			},
			// 是否淡出内容
			animation: {
				type: Boolean,
				default: true
			},
			// 提示文字
			text: {
				type: String,
				default: ''
			},
			// 高度
			height: {
				type: String,
				default: ''
			},
			// 模式 使用v-if 还是v-show
			mode: {
				type: String,
				default: 'show'
			}
		},
		watch: {
			show(newVal, oldVal) {
				if (!this.showPage) {
					setTimeout(() => {
						this.showPage = newVal
					}, 300)
				}
				if (newVal) {
					clearInterval(timer)
				}
			}
		},
		methods: {
			// 计时
			timing() {
				timer = setInterval(() => {
					if (time <= 1) {
						this.error = true
						time = timeout
						clearInterval(timer)
					} else {
						time--
					}
				}, 1000)
			},
			// 点击重试
			onRetry() {
				// this.timing()
				// this.error = false
				let pages = getCurrentPages()
				let current = pages[pages.length - 1]
				let url = current.route
				if (JSON.stringify(current.options) != '{}') {
					url += this.$u.queryParams(current.options)
				}
				if (['pages/index/index', 'pages/store/store', 'pages/friend/friend', 'pages/orderCenter/orderCenter',
						'/pages/me/me'
					].indexOf(url) > -1) {
					uni.reLaunch({
						url: `/${url}`
					});
				} else {
					uni.redirectTo({
						url: `/${url}`
					});
				}
				this.$emit('retry')
			}
		}
	}
</script>

<style lang="scss">
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.page-loading {
		.loading {
			min-height: 70vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.icon {
				width: 300rpx;
				height: 100rpx;
			}

			.text {
				color: #666;
				font-size: 26rpx;
			}

			.btn-retry {
				height: 60rpx;
				display: flex;
				background: linear-gradient(0deg, #FBD220, #FFE23E);
				color: #3D3D3D;
				font-size: 28rpx;
				margin-top: 60rpx;
				border-radius: 8rpx;
				width: 200rpx;
			}
		}

		.flex {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.show {
			animation: fadeIn .3s forwards;
		}
	}
</style>